<template>
  <view class="car-list">
    <view class="car-item">
      <view class="title">
        {{ carListData.machine_Name }}
      </view>
      <view class="car-cont">
        <view class="car-info">
          <view class="car-info-l">
            <image src="https://files.yzsheng.com/client/weixin/zizhuxiche.png" mode=""></image>
          </view>
          <view class="car-info-r">
            <view class="item">
              <view class="item-l">
                <text class="name">设备编号：</text>
                <text>{{ carListData.machine_Code }}</text>
              </view>
              <view class="item-r">
                <view class="state">
                  <text :class="{ success:machineState.mcstate === 1 && isOpen }">开</text>
                  /
                  <text :class="{ error:machineState.mcstate === 0 || !isOpen }">关</text>
                  <template v-if="machineState.mcstate === 0">
                    <u-switch v-model="closeState" size="30" disabled></u-switch>
                  </template>
                  <template v-else>
                    <u-switch v-model="isOpen" size="30" @change="switchChange"></u-switch>
                  </template>
                </view>
              </view>
            </view>
            <view class="item">
              <view class="item-l">
                <text class="name">设备状态：</text>
                <view class="state-wrap" v-if="machineState && machineState.id">
                  <text :class="getStateColor"></text>
                  <template v-if="machineState.mcstate === 0">
                    停机/检修
                  </template>
                  <template v-else-if="carListData.status === 10">
                    {{machineState.useflag === '1'?'忙碌':'空闲'}}
                  </template>
                  <template v-else>
                    {{statusEnum[carListData.status]}}
                  </template>
                </view>
              </view>
              <view class="item-r"></view>
            </view>
            <view class="item">
              <view class="item-l">
                <text class="name">清水水位：</text>
                <template v-if="machineState && machineState.id">
                  <text v-if="machineState.qsshuiwei === '1'">充足</text>
                  <text v-else class="error">低位预警</text>
                </template>
              </view>
              <view class="item-r"></view>
            </view>
            <view class="item">
              <view class="item-l">
                <text class="name">泡沫水位：</text>
                <template v-if="machineState && machineState.id">
                  <text v-if="machineState.pmshuiwei === '1'">充足</text>
                  <text v-else class="error">低位预警</text>
                </template>
              </view>
              <view class="item-r"></view>
            </view>
          </view>
        </view>
        <view class="repair-info" v-if="carListData.fault && repairNum">
          <view class="repair-l">
            <view>
              <text>报修信息</text>
              <text class="num">{{ repairNum }}</text>
            </view>
          </view>
          <view class="repair-r">
            <view class="item" v-if="repairList.length && !isShowAll">
              <view class="item-l">
                <text class="name">{{ repairList[0].name }}：</text>
                <view class="val-list">
                  <view v-for="(item, index) in repairList[0].list" :key="index">
                    {{ item.name }}
                    <text>x{{ item.number }}</text>
                  </view>
                </view>
              </view>
              <view class="item-r"><text class="repair" @click="repair(repairList[0].type)">修复</text></view>
            </view>
            <template v-if="isShowAll">
              <view class="item" v-for="(item, itemIndex) in repairList" :key="itemIndex">
                <view class="item-l">
                  <text class="name">{{ item.name }}：</text>
                  <view class="val-list">
                    <view v-for="(i, index) in item.list" :key="index">
                      {{ i.name }}
                      <text>x{{ i.number }}</text>
                    </view>
                  </view>
                </view>
                <view class="item-r"><text class="repair" @click="repair(item.type)">修复</text></view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <template v-if="isShowAll">
        <!-- 备注 -->
        <view class="remark-wrap" v-for="(remarkItem, remarkItemIndex) in carListData.fault.faultDescriptionList" :key="remarkItemIndex">
          <view class="remark-title">
            <text class="name">{{ remarkItem.name }}</text>
            <text class="time">{{ filterGetTime(remarkItem.addTime) }}</text>
          </view>
          <view class="remark-text">{{ remarkItem.content }}</view>
          <view class="remark-img"><image v-for="(imgUrl, imgUrlIndex) in remarkItem.urlList" :src="imgUrl" @click="previewImage(imgUrl)" :key="imgUrlIndex"></image></view>
        </view>
      </template>
      <view class="show-all" v-if="carListData.fault">
        <view @click="isShowAll = false" v-if="isShowAll"><u-icon name="arrow-up" color="#999999"></u-icon></view>
        <view @click="isShowAll = true" v-else><u-icon name="arrow-down" color="#999999"></u-icon></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 关闭状态
      closeState:false,
      // 机器状态
      machineState:{},
      // 是否显示所有信息（默认false）
      isShowAll: false,
      // 机器是否开启
      isOpen: false,
      nameEnum: {
        waterGunList: '水枪',
        bubbleList: '泡沫枪',
        cleaner: '吸尘器',
        machineList: '主机'
      },
      typeEnum:{
        waterGunList: 1,
        bubbleList: 2,
        cleaner: 3,
        machineList: 4
      },
      statusEnum:{
        10:'正常',
        11:'维修中',
        12:'停机/故障',
        13:'非营业时间'
      }
    }
  },
  props: {
    carListData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // 报修条数
    repairNum() {
      if (this.carListData && this.carListData.fault) {
        let num = 0
        for (let i in this.carListData.fault) {
          if (i !== 'faultDescriptionList' && i !== 'fault' && this.carListData.fault[i].length) {
            num++
          }
        }
        return num
      }
    },
    // 报修列表
    repairList() {
      let list = []
      if(this.carListData && this.carListData.fault){
        let obj = this.$u.deepClone(this.carListData.fault);
        delete obj.faultDescriptionList;
        delete obj.fault;
        for(let i in obj){
          if(obj[i].length){
            list.push({
              name:this.nameEnum[i],
              list:obj[i],
              type:this.typeEnum[i]
            })
          }
        }
      }
      return list
    },
    // 获取状态颜色
    getStateColor(){
      if(this.machineState.mcstate === 0){
        return;
      }
      if(this.carListData.status === 10 && this.machineState.useflag !== '1'){
        return 'success'
      }else if(this.carListData.status === 10 && this.machineState.useflag === '1'){
        return 'error'
      }
    }
  },
  created() {
    this.isOpen = this.carListData.status === 10 ? true : false
    // 获取机器状态
    this.getState()
  },
  methods: {
    // 时间格式过滤
    filterGetTime(t) {
      return this.$u.timeFormat(new Date(t).getTime(), 'yyyy-mm-dd hh:MM')
    },
    // 获取机器状态
    async getState() {
      const res = await this.$api.washCar.getWashCarState({
        wash_Machine_Id: this.carListData.wash_Machine_Id
      });
      if(res && res.code === 200 && res.data){
        this.machineState = res.data
      }
    },
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url]
      })
    },
    // 报修
    repair(type) {
      this.$root.repair({
        content: '是否确定报修信息已经修复？',
        show: true,
        title: '温馨提示',
        showConfirmButton: true,
        showCancelButton: true,
        state: 1,
        type: type,
        wash_Machine_Id: this.carListData.wash_Machine_Id
      })
    },
    // 控制开关
    async switchChange(e) {
      if (!e) {
        this.$root.modal = {
          content: '【关机】用户将不能启动机器洗车， 您是否确定此操作？',
          title: '温馨提示',
          show: true,
          state: 2,
          showConfirmButton: true,
          showCancelButton: true,
          open: e ? 2 : 1,
          wash_Machine_Id: this.carListData.wash_Machine_Id,
          success: () => {
            this.isOpen = false
          }
        }
        this.isOpen = true
      } else {
        const res = await this.$api.washCar.siteMgtOpen({
          open: e ? 2 : 1,
          wash_Machine_Id: this.carListData.wash_Machine_Id
        })
        if (res && res.code === 200) {
          this.$root.$refs.uToast.show({
            title: '设置成功'
          })
        }
        this.$root.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.car-list {
  margin-top: 30rpx;
  // border-bottom: 2rpx solid #eeeeee;
  .car-item {
    .title {
      font-weight: bold;
      font-size: 30rpx;
      margin-bottom: 20rpx;
      text {
        color: #38acff;
      }
    }
    .car-cont {
      .repair-info {
        display: flex;
        .repair-l {
          width: 140rpx;
          color: #999999;
          & > view {
            position: relative;
            .num {
              position: absolute;
              text-align: center;
              top: 50%;
              right: -10rpx;
              transform: translate(0, -50%);
              line-height: 32rpx;
              width: 32rpx;
              height: 32rpx;
              background-color: #f30000;
              display: inline-block;
              border-radius: 50%;
              color: #ffffff;
            }
          }
        }
        .repair-r {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          .item {
            display: flex;
            .item-l {
              display: flex;
              flex: 1;
              .name {
                width: 140rpx;
                color: #999999;
                font-size: 26rpx;
                white-space: nowrap;
              }
              .val-list {
                flex: 1;
                view {
                  margin-right: 20rpx;
                  margin-bottom: 18rpx;
                  color: #f30000;
                  border: 2rpx solid #f30000;
                  border-radius: 10rpx;
                  font-size: 26rpx;
                  padding: 4rpx 8rpx;
                  display: inline-block;
                  text {
                    margin-left: 10rpx;
                  }
                }
              }
            }
            .item-r {
              .repair {
                color: #38acff;
              }
            }
          }
        }
      }
      .car-info {
        display: flex;
        margin-bottom: 20rpx;
        .car-info-l {
          width: 140rpx;
          image {
            height: 180rpx;
            width: 100%;
          }
          view {
            color: #999999;
          }
        }
        .car-info-r {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          flex: 1;
          .item {
            display: flex;
            .state-wrap {
              text {
                width: 20rpx;
                height: 20rpx;
                background-color: #999999;
                display: inline-block;
                border-radius: 50%;
                margin-right: 10rpx;
                &.success {
                  background-color: #3db707;
                }
                &.error {
                  background-color: #f30000;
                }
              }
            }
            .item-l {
              display: flex;
              flex: 1;
              .name {
                width: 140rpx;
                color: #999999;
                font-size: 26rpx;
                white-space: nowrap;
              }
              .error {
                color: #f30000;
              }
            }
            .item-r {
              .state {
                display: flex;
                align-items: center;
                color: #999999;
                .success {
                  color: #3db707;
                }
                .error {
                  color: #f30000;
                }
                .u-switch {
                  margin-left: 10rpx;
                }
              }
              .repair {
                color: #38acff;
              }
            }
          }
        }
      }
    }
    .remark-wrap {
      background-color: #f8f8f8;
      padding: 20rpx 15rpx;
      margin-bottom: 20rpx;
      .remark-title {
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #eeeeee;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        .name {
          font-weight: bold;
          color: #333333;
          font-size: 28rpx;
        }
        .time {
          color: #999999;
          font-size: 22rpx;
        }
      }
      .remark-text {
        border-radius: 10rpx;
        margin-bottom: 26rpx;
      }
      .remark-img {
        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 10rpx;
          margin-right: 30rpx;
        }
      }
    }
    .show-all {
      margin-top: 10rpx;
      text-align: center;
      & > view {
        display: inline-block;
        background-color: #f4f4f4;
        padding: 5rpx 40rpx;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
